<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          placeholder="借款客户"
          @keyup.enter.native="getData()"
          @clear="getData()"
          clearable
          v-model="params.customer_name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="客户类型"
          clearable
          number-key
          :options="enumCustomerType"
          v-model="params['org_class.eq']"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          v-model="params['review_approval.in']"
          placeholder="审批状态"
          clearable
          @change="getData()"
          :options="enumReviewApprovalSelect"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          v-model="params['is_replace.in']"
          placeholder="替换状态"
          clearable
          @change="getData()"
          :options="enumReplaceSelectStatus"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-download"
          :loading="exportLoading"
          @click="exportExcel(batchImport)"
        >
          导出
        </el-button>
      </el-form-item>

      <!-- <el-form-item>
        <el-date-picker class="date-picker-ml"
                        v-model="datePicked"
                        type="daterange"
                        unlink-panels
                        range-separator="-"
                        start-placeholder="导入时间(开始)"
                        end-placeholder="导入时间(截止)"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions"
                        @change="handleDateChange"></el-date-picker>
      </el-form-item> -->
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:name="scope">
        <el-popover placement="top-start" title="项目经理" trigger="hover">
          <div>
            <div>{{ `A角： ${scope.row.res_a_name || '-'}；` }}</div>
            <div>{{ `B角： ${scope.row.res_b_name || '-'}；` }}</div>
          </div>
          <div slot="reference">
            <div class="status-label badge-info text-left w-100">
              <div>A角:{{ scope.row.res_a_name }}</div>
              <div>B角:{{ scope.row.res_b_name }}</div>
            </div>
          </div>
        </el-popover>
      </template>
      <template v-slot:create="scope">
        <div>
          <div>{{ scope.row.createTime || '-' }}</div>
          <div>{{ scope.row.submit_person_name || '-' }}</div>
        </div>
      </template>
      <template v-slot:credit="scope">
        <div>
          <div>{{ scope.row.period_credit || '-' }} 个月</div>
          <div>{{ scope.row.loadDateCredit || '-' }}</div>
          <div>{{ scope.row.loadEndDateCredit || '-' }}</div>
        </div>
      </template>
      <template v-slot:reply="scope">
        <div>
          <div>{{ scope.row.warranty_period || '-' }} 个月</div>
          <div>{{ scope.row.loadDate || '-' }}</div>
          <div>{{ scope.row.loadEndDate || '-' }}</div>
        </div>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="getData"
        :current-page.sync="params.index"
        :page-sizes="[15, 100, 200, 500, 1000]"
        :page-size="params.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableCount"
      ></el-pagination>
    </div>

    <project-view-dialog
      :visible.sync="viewVisible"
      :batch-no="viewAttachNo"
      :tab-name="viewTabName"
      :query-id="queryId"
    ></project-view-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import { lastPickerShortcuts } from '@/common/plugins/tools/date'
import { enumCustomerType, dataAdapter } from '@/bank/views/business/hplimit/enum'
import {
  enumReviewApproval,
  enumReviewStyle,
  enumReplaceStatus,
  enumReplaceStatusStyle,
  enumReviewApprovalSelect,
  enumReplaceSelectStatus,
} from '@/bank/views/limit/index'

import ProjectViewDialog from '@/bank/views/business/hplimit/ProjectViewDialog'
import hndTableMixin from '@/bank/views/business/hplimit/mixins'
const tableColumns = [
  {
    attrs: { label: '借款客户', prop: 'customer_name', minWidth: '120px' },
    process: (v, row) => ({
      attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
    }),
  },
  { attrs: { label: '联系人', prop: 'corp_name', align: 'center' } },
  { attrs: { label: '客户类型', prop: 'org_class_name', align: 'center' } },
  {
    attrs: { label: '授信金额(万元)', prop: 'reply_funds', align: 'center', width: 120 },
  },
  {
    attrs: { label: '授信期限', prop: ' period_credit', align: 'center', width: 110 },
    slot: 'credit',
  },
  {
    attrs: { label: '放款金额(万元)', prop: 'warranty_amount', align: 'center', width: 120 },
  },
  {
    attrs: { label: '放款期限', prop: 'warranty_period', align: 'center', width: 110 },
    slot: 'reply',
  },
  {
    attrs: { label: '所属行业', prop: 'parent_main_business', align: 'left', minWidth: '110px' },
  },

  { attrs: { label: '十二大产业', prop: 'main_business', align: 'center', minWidth: '110px' } },
  // { attrs: { label: '贷款用途', prop: 'funds_use_dir', align: 'center' }, slot: 'use' },
  { attrs: { label: '银行项目经理', prop: 'resName', align: 'center', width: 140 }, slot: 'name' },
  { attrs: { label: '担保费利率', prop: 'warranty_rate', align: 'center' } },
  { attrs: { label: '新增时间', prop: 'createTime', align: 'left', minWidth: '90px' } },
  { attrs: { label: '新增人', prop: 'bank_user_name', align: 'center', minWidth: '90px' } },
  {
    attrs: { label: '提交时间', prop: 'submitDate', align: 'center' },
  },
  {
    attrs: { label: '项目状态', prop: 'approvalStatus', align: 'center' },
    render: (h, { row }) =>
      h('div', { style: { lineHeight: 1.2 } }, [
        h('div', { class: `text-${row.approvalStatusStyle}` }, row.approvalStatus),
        h('small', { class: `text-${row.replaceStatusStyle}` }, row.replaceStatus),
      ]),
  },
]

export default {
  components: {
    ProjectViewDialog,
  },
  mixins: [hndTableMixin],
  props: {
    visible: Boolean,
    batchData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      enumCustomerType,
      enumReviewApprovalSelect,
      enumReplaceSelectStatus,
      batchKey: 'project_apply_batch_id',

      loading: false,
      params: {
        index: 1,
        size: 15,
        customer_name: '',
        'org_class.eq': '',
      },
      order: {
        customer_name: 'desc',
        create_time: 'desc',
      },
      tableName: 'datum_one_county_industry',
      tableColumns: [
        ...tableColumns,
        {
          attrs: { label: '操作', align: 'center', minWidth: '180px' },
          operations: [
            { name: '查看', event: this.handleView },
            { name: '附件', event: this.handleAttach },
          ],
        },
      ],
      tableData: [],
      tableCount: 0,

      // 提交时间选择
      datePicked: [],
      pickerOptions: {
        shortcuts: lastPickerShortcuts,
      },

      // 附件上传
      attachVisible: false,
      attachProjectData: {},

      viewVisible: false,
      queryId: '',
      viewAttachNo: '',
      viewTabName: 'detail',
      exportLoading: false,
      enumReviewApproval,
    }
  },
  computed: {
    ...mapGetters(['clientId']),
    batchImport() {
      return this.batchData.batch_no
    },
    batchNo() {
      return this.batchData[this.batchKey]
    },
  },
  watch: {
    visible: {
      handler: function (val) {
        if (val) {
          this.getData()
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleSizeChange(val) {
      this.params.size = val
      this.getData(1)
    },
    getParams() {
      return this.params
    },
    getData(index = 1) {
      if (!this.batchNo) return

      this.params[`${this.batchKey}.eq`] = this.batchNo
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.tableCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },

    dataAdapter(item) {
      item = dataAdapter(item)
      item.approvalStatus = enumReviewApproval[item.review_approval]
      item.approvalStatusStyle = enumReviewStyle[item.review_approval]
      item.replaceStatus = enumReplaceStatus[item.is_replace] || ''
      item.replaceStatusStyle = enumReplaceStatusStyle[item.is_replace]

      item.submitDate = (this.batchData.create_time || '').substring(0, 10)

      return item
    },

    handleDateChange() {
      const [start, end] = this.datePicked || []
      if (start && end) {
        this.params['create_time.gte'] = start
        this.params['create_time.lte'] = `${end} 23:59:59`
      } else {
        this.params['create_time.gte'] = ''
        this.params['create_time.lte'] = ''
      }
      this.getData()
    },

    handleView(row = {}) {
      this.queryId = row.customer_related_id
      this.viewAttachNo = row[this.batchKey]
      this.viewTabName = 'detail'
      this.viewVisible = true
    },

    handleAttach(row = {}) {
      this.queryId = row.customer_related_id
      this.viewAttachNo = row[this.batchKey]
      this.viewTabName = 'attach'
      this.viewVisible = true
    },
  },
}
</script>

<style lang="scss" scoped>
.status-label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
</style>
